import React, {Component} from 'react';
import PropTypes from 'prop-types'
class TodoItem extends Component{

    constructor (props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    // 子组件被渲染一次后，如果要更新，就强制要求不更新
    // 提升性能，避免一个组件做无畏的render函数的重新执行，减少虚拟DOM的比对
    shouldComponentUpdate(nextProps, nextState){
        if (nextProps.content !== this.props.content) {
            return true
        } else {
            return false
        }
       
    }
    /*
        提升React性能
            1，使用React生命周期函数shouldComponentUpdate，减少DOM比对操作
            2，setState内置性能提升机制
    */ 
    render(){
        console.log('child render')
        const {content, test} =  this.props ;
        return (
            <div onClick={this.handleClick}>
                {test} - {content}
            </div>
        )
    }
    handleClick(){
        const {deleteItem, index} = this.props
        deleteItem(index)
    }
}
TodoItem.propTypes = {
    test: PropTypes.string.isRequired,
    content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    deleteItem: PropTypes.func,
    index: PropTypes.number
}
TodoItem.defaultProps = {
    test: 'hello world'
}
// Tisinbo
export default TodoItem